<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
            background-color: rgb(249, 249, 249);
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .div2{
            width: 47rem;
            height: 13rem;
            position: relative;
            background-color: white;
            border: 0.2rem solid rgb(227, 227, 229);
        }
        .p3{
            width: 10rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(139, 138, 138);
            position: absolute;
            top: 2rem;
            left: 1rem;
            line-height: 2rem;
        }
        .d5{
            width: 13rem;
            height: 5rem;
            /* color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red; */
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 6rem;
            left: 1rem;
            font-size: 1.5rem;
        }
        .img3{
            width: 3rem;
            height: 3rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .d6{
            width: 15rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 6rem;
            left: 16rem;
            font-size: 1.5rem;
        }
        .d7{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 6rem;
            left: 33rem;
            font-size: 1.5rem;
        }

        .div3{
            width: 47rem;
            height: 24rem;
            position: relative;
            background-color: white;
            border: 0.2rem solid rgb(227, 227, 229);
        }
        .div4{
            width: 47rem;
            height: 20rem;
            position: relative;
            background-color: white;
            border: 0.2rem solid rgb(227, 227, 229);
        }
        .p4{
            width: 20rem;
            height: 2rem;
            font-size: 1.2rem;
            line-height: 2rem;
            position: absolute;
            top: 6rem;
            left: 1rem;
        }
        .d001{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 1rem;
            top: 9rem;
        }
        .d002{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 8rem;
            top: 9rem;
        }
        .d003{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 15rem;
            top: 9rem;
        }
        .d004{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 1rem;
            top: 6rem;
        }
        .d005{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 8rem;
            top: 6rem;
        }
        .d006{
            width: 6rem;
            height: 6rem;
            position: absolute;
            left: 15rem;
            top: 6rem;
        }
        .img4{
            width: 6rem;
        }
        .p5{
            width: 28rem;
            height: 2rem;
            font-size: 1.2rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
        }
        .d8{
            width: 13rem;
            height: 5rem;
            /* color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red; */
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 17rem;
            left: 1rem;
            font-size: 1.5rem;
        }
        .d9{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 17rem;
            left: 16rem;
            font-size: 1.5rem;
        }
        .d10{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 17rem;
            left: 31rem;
            font-size: 1.5rem;
        }
        .d11{
            width: 13rem;
            height: 5rem;
            /* color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red; */
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 13rem;
            left: 1rem;
            font-size: 1.5rem;
        }
        .d12{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 13rem;
            left: 16rem;
            font-size: 1.5rem;
        }
        .d13{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 13rem;
            left: 31rem;
            font-size: 1.5rem;
        }
        .div5{
            width: 47rem;
            height: 6rem;
            margin-top: 6rem;
            position: relative;
            background-color: white;
        }
        .d007{
            width: 44rem;
            height: 5rem;
            position: absolute;
            top: 0.5rem;
            left: 1.5rem;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 5rem;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">选择配送方式</div>
            </div>
        </div>

        <div class="div2">
            <div class="p3">配送时间</div>
            <div class="d5">
                工作日送货
                <img src="" alt="" class="img3">
            </div>
            <div class="d6">
                双休/节假日送货
                <img src="" alt="" class="img3">
            </div>
            <div class="d7">
                时间不限
                <img src="" alt="" class="img3">
            </div>
        </div>

        <div class="div3">
            <div class="p3">配送时间</div>
            <div class="p4">由【国美在线】配送3件商品</div>
            <div class="d001">
                <img src="img/goods_dv.png" alt="" class="img4">
            </div>
            <div class="d002">
                <img src="img/goods_2.png" alt="" class="img4">
            </div>
            <div class="d003">
                <img src="img/goods_3.png" alt="" class="img4">
            </div>
            <div class="d8">
                快递
                <img src="" alt="" class="img3">
            </div>
            <div class="d9">
                平邮
                <img src="" alt="" class="img3">
            </div>
            <div class="d10">
                邮政
                <img src="" alt="" class="img3">
            </div>
        </div>

        <div class="div4">
            <div class="p5">由【普美斯数码专营】配送3件商品</div>
            <div class="d004">
                <img src="img/goods_dv.png" alt="" class="img4">
            </div>
            <div class="d005">
                <img src="img/goods_1.png" alt="" class="img4">
            </div>
            <div class="d006">
                <img src="img/goods_3.png" alt="" class="img4">
            </div>
            <div class="d11">
                快递
                <img src="" alt="" class="img3">
            </div>
            <div class="d12">
                平邮
                <img src="" alt="" class="img3">
            </div>
            <div class="d13">
                邮政
                <img src="" alt="" class="img3">
            </div>
        </div>

        <div class="div5">
            <div class="d007">确定</div>
        </div>
    </div>

    
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        var shijian;
        var fangfa1;
        var fangfa2;

        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".d3").click(function(){
			window.location.href = "订单.html"
		})
        
        $(".d5").on("click",function(){
            $(".d6").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d6 .img3").attr("src","");
            $(".d7").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d7 .img3").attr("src","");
            $(".d5").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d5 .img3").attr("src","img/yes.png");
            // shijian = $(".d5").html();
            shijian = "工作日送货"
        })

        $(".d6").on("click",function(){
            $(".d5").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d5 .img3").attr("src","");
            $(".d7").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d7 .img3").attr("src","");
            $(".d6").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d6 .img3").attr("src","img/yes.png");
            shijian = $(".d6").html();
            shijian = "双休/节假日送货"
        })

        $(".d7").on("click",function(){
            $(".d6").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d6 .img3").attr("src","");
            $(".d5").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d5 .img3").attr("src","");
            $(".d7").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d7 .img3").attr("src","img/yes.png");
            shijian = $(".d7").html();
            shijian = "时间不限"
        })

        $(".d8").on("click",function(){
            $(".d9").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d9 .img3").attr("src","");
            $(".d10").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d10 .img3").attr("src","");
            $(".d8").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d8 .img3").attr("src","img/yes.png");
            // fangfa1 = $(".d8").html();
            fangfa1 = "快递"
        })

        $(".d9").on("click",function(){
            $(".d8").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d8 .img3").attr("src","");
            $(".d10").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d10 .img3").attr("src","");
            $(".d9").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d9 .img3").attr("src","img/yes.png");
            // fangfa1 = $(".d9").html();
            fangfa1 = "平邮"
        })

        $(".d10").on("click",function(){
            $(".d8").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d8 .img3").attr("src","");
            $(".d9").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d9 .img3").attr("src","");
            $(".d10").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d10 .img3").attr("src","img/yes.png");
            // fangfa1 = $(".d10").html();
            fangfa1 = "邮政"
        })

        $(".d11").on("click",function(){
            $(".d12").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d12 .img3").attr("src","");
            $(".d13").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d13 .img3").attr("src","");
            $(".d11").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d11 .img3").attr("src","img/yes.png");
            // fangfa2 = $(".d11").html();
            fangfa2 = "快递"
            console.log(fangfa2)
        })

        $(".d12").on("click",function(){
            $(".d11").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d11 .img3").attr("src","");
            $(".d13").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d13 .img3").attr("src","");
            $(".d12").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d12 .img3").attr("src","img/yes.png");
            // fangfa2 = $(".d12").html();
            fangfa2 = "平邮"
            console.log(fangfa2)
        })

        $(".d13").on("click",function(){
            $(".d11").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d11 .img3").attr("src","");
            $(".d12").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d12 .img3").attr("src","");
            $(".d13").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d13 .img3").attr("src","img/yes.png");
            // fangfa2 = $(".d13").html();
            fangfa2 = "邮政"
            console.log(fangfa2)
        })

        $(".d007").on("click",function(){
            localStorage.shijian = shijian;
			localStorage.fangfa1 = fangfa1;
			localStorage.fangfa2 = fangfa2;
        })

        $(".d3").click(function(){
            localStorage.shijian = shijian;
			localStorage.fangfa1 = fangfa1;
			localStorage.fangfa2 = fangfa2;
			window.location.href="订单.html";
		})
    </script>
</body>
</html>